<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="./css/details.css">
    <script src="js/flexible.js"></script>
    <title></title>
</head>

<body>
    <div class="app" v-cloak>
        <div class="header">
            <div class="title">
                {{formData.title}}
            </div>
            <div class="setion">
                <div class="setion_item">提交人</div>
                <div>{{formData.createBy}}</div>
            </div>
            <div class="setion">
                <div class="setion_item">时间</div>
                <div>{{ formData.createTime }}</div>
            </div>
            <div class="picture">
                <div class="picture_item" :class="[isActive  == index ? 'active' : '']" v-for="(item,index) in listType"
                    :key="index" @click="pictureClick(index)">

                    <div v-if="item == '图片'">
                        <div>{{item}}</div>
                        <div>{{formData.pictureList.length}}</div>
                    </div>
                    <div v-if="item == '视频'">
                        <div>{{item}}</div>
                        <div>{{formData.videoList.length}}</div>
                    </div>
                    <div v-if="item == '文档'">
                        <div>{{item}}</div>
                        <div>{{formData.documentList.length}}</div>
                    </div>
                    <div v-if="item == '音频'">
                        <div>{{item}}</div>
                        <div>{{formData.auditMediaLists.length}}</div>
                    </div>
                    <div v-if="item == '其他'">
                        <div>{{item}}</div>
                        <div>{{formData.otherList.length}}</div>
                    </div>
                </div>
            </div>
            <div class="describe" v-if="isActive == 0">
                <div class="describeOne" v-for="(item,index) in formData.pictureList">
                    <img :src="item.sourceUrl" alt="" @click="imgClick(item.sourceUrl)">
                </div>
            </div>
            <div class="videoStyle" v-if="isActive == 1" v-for="(item,index) in formData.videoList" :key="index">
                <video :src="item.sourceUrl+'#t=0.1'" preload="metadata" x-webkit-airplay="allow" x5-playsinline=""
                    webkit-playsinline="" playsinline="true" x5-video-player-type="h5-page" controls="controls"></video>
            </div>
            <div class="documentStyle" v-if="isActive == 2" v-for="(item,index) in formData.documentList" :key="index">
                <div class="documentStyle_left">
                    <img src="./images/wendang.png" alt="">
                    <div>{{item.name}}</div>
                </div>
                <div class="documentStyle_right">
                    <a :href="item.sourceUrl" target="downloadFile" class="fileStyle" download>
                        <img src="./images/download.png" alt="">
                    </a>

                </div>
            </div>
            <div class="audioStyle" v-if="isActive == 3" v-for="(item,index) in formData.auditMediaLists" :key="index">
                <audio controls :src="item.sourceUrl"></audio>
            </div>
            <div class="documentStyle" v-if="isActive == 4" v-for="(item,index) in formData.otherList" :key="index">
                <div class="documentStyle_left">
                    <img src="./images/wendang.png" alt="">
                    <div>{{item.name}}</div>
                </div>
                <div class="documentStyle_right">
                    <a :href="item.sourceUrl" target="downloadFile" class="fileStyle" download>
                        <img src="./images/download.png" alt="">
                    </a>

                </div>
            </div>
            <div class="remarkStyle">
                <div class="remarkStyle_title">
                    描述
                </div>
                <div class="remarkStyle_setiom">
                    {{ formData.remark }}
                </div>
            </div>
            <div class="application">

                <div class="applicationTop">
                    应用渠道
                </div>
                <div class="applicationBotton">
                    <div class="applicationBotton_item" v-for="(item,index) in formData.iconList " :key="index">
                        <div class="icon"><img :src="item.icon" alt=""></div>
                        <div class="applicationBotton_name">{{ item.channelName }}</div>
                    </div>

                </div>
            </div>
            <div class="footer">
                <div v-if="typeFalg == 0">
                    <button class="footerBtn" @click="toExamine(2)"
                        v-if="auditStatus == 1 || auditStatus == 2 ">同意并选择下一级审核人</button>

                    <button class="footerBtn" @click="agreeWith" v-else>同意</button>
                    <button class="footerBtn" @click="toExamine(2)" v-if="auditStatus == 4 ">同意并提级审核</button>
                    <div class="footer_item" @click="toExamine(1)">驳回</div>
                </div>
                <div class="footer_item" v-if="(pushFlag == 0) &&(auditStatus == 9 ||auditStatus== 6)"
                    @click="synchronousClick">同步百度内容库</div>
                <div class="footer_item" @click="historyClick">审核历史</div>

                <button class="footerBtn" @click="finishAudit()" style="background: red"
                        v-if="auditStatus == 1 || auditStatus == 2 ">同意并结束审核</button>
            </div>
        </div>
        <!-- //模态框 -->
        <div class="mask" v-if="maskFlag">
            <div class="roomContent">
                <div class="roomContent_title">
                    {{ maskModal == 1 ? '驳回意见': '选择下一级审核人'}}
                </div>
                <div class="close" @click="closeClick"><img src="./images/del.png" alt=""></div>

                <!-- //驳回意见 -->
                <div class="roomContentOne" v-if="maskModal == 1 ">
                    <div>{{formData.createBy}}</div>
                </div>
                <div class="roomContentTwo" v-if="maskModal == 1 ">
                    {{formData.title}}
                </div>
                <textarea class="roomContentTest" v-if="maskModal == 1 " v-model="rejectText"
                    placeholder="请输入"></textarea>
                <!-- //审核 -->
                <div v-if="maskModal == 2" class="searchStyle">
                    <img src="./images/search.png" alt="" class="searchOne">
                    <form action="" class='inputStyle' @submit.prevent>
                        <input type="search" class='inputStyle' v-model="searchText" @keyup.13="inputChange"
                            @blur="blurClick" @focus="focusChange" placeholder="请输入用户名">
                    </form>
                </div>
                <div class="main" v-if="maskModal == 2">
                    <table cellspacing="0" style="width: 100%;">
                        <tbody>
                            <tr v-for="(item,index) in userList" :key="index">
                                <td>
                                    <div :class='index == bgColor ? "mainItemActive":"mainItem"'
                                        @click="mainClick(item,index)">
                                        <div style="width: 1.4rem;word-break: break-all;">{{item.account}}</div>
                                        <div>{{item.userName+"（"+item.organizationName+"）"}}</div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="mainFooter">
                        <button class="upperStyle" @click="upperClick">上一页</button>
                        <button class="belowStyle" @click="belowClick">下一页</button>
                    </div>
                </div>
                <div class="roomContent_footer" @click="submineClick()">
                    提交
                </div>
            </div>
            <div class="boxLoading" v-if="boxLoadingFlag">
            </div>
        </div>
        <div class="box" v-if="loading">
            <div class="modalBox">
                <div class="modalBox_item">确定选该人员进行审核？</div>
                <div class="modalBox_footer">
                    <button class="modalBox_footer_left" @click="failClick">取消</button>
                    <button class="modalBox_footer_right" @click="successClick">确认</button>
                </div>
            </div>
        </div>
        <div class="box" v-if="finishAuditLoading">
            <div class="modalBox">
                <div class="modalBox_item">确定审核通过并且结束审核？注意：该操作会直接三审通过，结束审核流程</div>
                <div class="modalBox_footer">
                    <button class="modalBox_footer_left" @click="failClick">取消</button>
                    <button class="modalBox_footer_right" @click="finishAuditClick">确认</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script src="js/utils.js?v=2"></script>
<script src="js/axios.min.js"></script>
<script src="js/jquery-3.3.0.min.js"></script>
<script>
    new Vue({
        el: '.app',
        data() {
            return {
                isActive: 0,
                fatherId: '',
                listType: ['图片', '视频', '文档', '音频', '其他'],
                maskFlag: false,
                maskModal: 1,//1 --驳回  2--同意并提交下一审核人
                rejectText: '',
                auditStatus: '',
                pushFlag: '',
                rejectNumber: '',
                searchText: '',//搜索框,
                userList: [],//用户列表,
                roleId: '',//一审角色 4 二审角色 5 三审角色 6 终审角色（查询全台用户)
                typeFalg: '',
                loading: false,
                finishAuditLoading:false,
                boxLoadingFlag: false,
                formData: {
                    pictureList: [],
                    videoList: [],
                    auditMediaLists: [],
                    documentList: [],
                    remark: '',
                    iconList: [],
                    otherList: []

                },
                userObj: {
                    userName: '',
                    page: 1,
                    rows: 10,
                    ouId: '',
                    roleId: '',
                },
                bgColor: -1,
                userId: '',
                agreeWithOneNumber: '',

            }
        },

        methods: {
            //点击照片变大
            imgClick(e) {
                var objE = document.createElement("div");
                objE.innerHTML = '<div class="bgM" >' +
                    '<img src="' + e + '" id="img_scan" class="img-custom-img2"/>' +
                    '</div>';
                document.body.appendChild(objE.children[0]);
                //退出图片预览事件
                var $bg = document.querySelector(".bgM");
                $bg.onclick = function () {
                    var dm = document.querySelector(".bgM");
                    document.body.removeChild(dm);
                }
                //阻止事件冒泡
                // var $img = document.querySelector(".img-custom-img2");
                // $img.onclick = function (event) {
                //     event.stopPropagation();
                // }
            },
            pictureClick(index) {
                this.isActive = index;
            },
            //同意
            agreeWith() {
                this.maskModal = 3
                this.changeStatusChange()
            },
            toExamine(e) {
                this.maskModal = e;
                this.maskFlag = true;
                this.userClick()

            },
            finishAudit(){
                this.finishAuditLoading = true;

            },
            finishAuditClick(){
                axios.post(utils.baseUrl + 'mediaAudit/finishAudit',  {ids: this.fatherId}, {
                    transformRequest: [function (data, header) {
                        var params = [];
                        for (var key in data) {
                            params.push(key + '=' + data[key])
                        }
                        return params.join('&')
                    }], headers: {
                        MAToken: utils.getMaToken(),
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        this.maskFlag = false;
                        utils.customDialog.toast({
                            message: '成功'
                        });
                        window.location.href = "./index.html"
                    } else {
                        utils.customDialog.toast({
                            message: res.data.message
                        });
                    }
                })
            },
            historyClick() {
                window.location.href = "./history.html?id=" + this.fatherId
            },
            synchronousClick() {
                let o = {
                    auditId: this.fatherId,
                }
                axios.post(utils.baseUrl + 'mediaAudit/pushBaiDu', o, {
                    transformRequest: [function (data, header) {
                        var params = [];
                        for (var key in data) {
                            params.push(key + '=' + data[key])
                        }
                        return params.join('&')
                    }], headers: {
                        MAToken: utils.getMaToken(),
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        this.maskFlag = false;
                        utils.customDialog.toast({
                            message: '操作成功'
                        });

                        setTimeout(() => {
                            window.location.href = "./index.html"
                        }, 1000)

                    } else {
                        utils.customDialog.toast({
                            message: res.data.message
                        });
                    }
                })
            },
            closeClick() {
                this.maskFlag = false;
                this.rejectText = '';
                this.userId = '';
                this.searchText = ''
                this.userObj.userName = ''
            },
            focusChange(e) {
                // console.log(e,'获取焦点')
            },
            blurClick(e) {
                // console.log(e,'失去焦点')
            },
            inputChange(e) {
                this.userObj.userName = e.target._value;
                this.userObj.page = 1;
                this.bgColor = -1;
                // setTimeout(() => {
                this.userClick();
                // }, 500)
            },
            userClick() {
                if (this.maskModal == 2) {
                    this.boxLoadingFlag = true
                }

                this.userObj.roleId = this.roleId,
                    axios.get(utils.baseUrl + 'systemUser/getAuditUserList', {
                        params: this.userObj,
                        headers: {
                            MAToken: utils.getMaToken(),
                            "fromSource": 'AQDAPP',
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }

                    }).then(res => {
                        let belowStyle = document.querySelector('.belowStyle');
                        let upperStyle = document.querySelector('.upperStyle');
                        if (res.data.code == 200) {
                            this.userList = res.data.result.mapList;
                            if (this.maskModal == 2) {
                                this.boxLoadingFlag = false
                            }
                            if (this.userList.length < 10) {
                                belowStyle.style.backgroundColor = '#F2F5F9'
                                belowStyle.style.color = '#1890FF'
                            } else {
                                belowStyle.style.color = '#ffffff'
                                belowStyle.style.backgroundColor = '#1890FF'
                            }
                        }
                        if (this.userObj.page == 1) {
                            upperStyle.style.backgroundColor = '#F2F5F9'
                            upperStyle.style.color = '#1890FF'

                        }
                    })
            },
            upperClick() {
                let upperStyle = document.querySelector('.upperStyle');
                if (this.userObj.page == 1) {
                    upperStyle.style.backgroundColor = '#F2F5F9'
                    upperStyle.style.color = '#1890FF'
                    utils.customDialog.toast({
                        message: '温馨提示：暂无上一页数据'
                    });

                } else {
                    upperStyle.style.color = '#fff'
                    upperStyle.style.backgroundColor = '#1890FF'
                    this.userObj.page--;
                    this.bgColor = -1
                    this.userClick()
                }


            },
            belowClick() {
                if (this.userList.length < 10) {
                    utils.customDialog.toast({
                        message: '温馨提示：暂无下一页数据'
                    });

                } else {
                    let upperStyle = document.querySelector('.upperStyle');
                    upperStyle.style.color = '#fff'
                    upperStyle.style.backgroundColor = '#1890FF'
                    this.userObj.page++;
                    this.bgColor = -1
                    this.userClick()
                }

            },
            mainClick(e, index) {
                this.bgColor = index;
                this.userId = e.id
            },
            changeStatusChange() {
                let o = {
                    ids: this.fatherId,
                    nextAuditById: this.userId,//下级审核人
                    auditStatus: '',
                    auditOpinion: this.rejectText,//意见
                }
                if (this.maskModal == 1) {
                    o.auditStatus = this.rejectNumber
                } else if (this.maskModal == 2) {
                    //同意并提及审核
                    if (this.auditStatus == 4) {
                        o.auditStatus = 8
                    } else {
                        o.auditStatus = this.agreeWithOneNumber
                    }
                } else {
                    // /同意./
                    if (this.auditStatus == 4) {
                        o.auditStatus = 6
                    } else {
                        o.auditStatus = 9
                    }

                }
                axios.post(utils.baseUrl + 'mediaAudit/changeStatus', o, {
                    transformRequest: [function (data, header) {
                        var params = [];
                        for (var key in data) {
                            params.push(key + '=' + data[key])
                        }
                        return params.join('&')
                    }], headers: {
                        MAToken: utils.getMaToken(),
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        this.maskFlag = false;
                        utils.customDialog.toast({
                            message: '成功'
                        });
                        // setTimeout(() => {
                        window.location.href = "./index.html"
                        // }, 1000)

                    } else {
                        utils.customDialog.toast({
                            message: res.data.message
                        });
                    }
                })
            },
            submineClick() {
                if (this.maskModal == 1) {
                    if (this.rejectText == '') {
                        utils.customDialog.toast({
                            message: '请输入驳回意见'
                        });
                    } else {
                        this.changeStatusChange()
                    }
                } else {
                    if (this.userId == '') {
                        utils.customDialog.toast({
                            message: '请选择数据'
                        });
                    } else {
                        this.loading = true
                        this.rejectText = '';
                        // this.changeStatusChange()
                    }
                }

            },
            failClick() {
                this.loading = false;
                this.maskFlag = false;
                this.bgColor = -1;
                this.userId = '';
                this.searchText = '';
                this.userObj.userName = '';
                this.finishAuditLoading = false;
            },
            successClick() {
                this.loading = false;
                this.changeStatusChange()
            }

        },
        created() {
            let MAToken = utils.getMaToken();
            if (utils.isEmpty(MAToken)) {
                return;
            }

            utils.customDialog.init()
            this.typeFalg = utils.getQueryString("type")
            this.fatherId = utils.getQueryString("id")
            axios({
                url: utils.baseUrl + 'mediaAudit/getAuditDetail',
                method: 'get',
                headers: {
                    MAToken: MAToken
                },
                params: {
                    id: this.fatherId,
                    nowFlowFlag: 1,
                }
            }).then((res) => {
                if (res.data.code == 200) {
                    let date = res.data.result.domain;
                    this.formData.title = date.title;
                    document.title = date.title;
                    this.formData.createBy = date.createBy;
                    this.formData.createTime = utils.formatTimeEn(date.createTime);
                    this.formData.remark = date.remark;
                    this.formData.iconList = [...date.useChannelList];
                    this.auditStatus = date.auditStatus;
                    this.pushFlag = date.pushFlag;
                    if (date.auditStatus == 1) {
                        this.rejectNumber = 3//驳回
                        this.roleId = 4;
                        this.agreeWithOneNumber = 2; //同意
                    } else if (date.auditStatus == 2) {
                        this.rejectNumber = 5
                        this.roleId = 5;
                        this.agreeWithOneNumber = 4; //同意
                    } else if (date.auditStatus == 4) {
                        this.rejectNumber = 7;
                        this.roleId = 6;
                        this.agreeWithOneNumber = 6; //同意
                    } else if (date.auditStatus == 8) {
                        this.rejectNumber = 10
                        this.agreeWithOneNumber = 9; //同意
                    }
                    for (var i = 0; i < date.auditMediaList.length; i++) {
                        console.log(date.auditMediaList[i].fileType)
                        if (date.auditMediaList[i].fileType == 'IMAGE') {
                            this.formData.pictureList.push(date.auditMediaList[i])
                        } else if (date.auditMediaList[i].fileType == "AUDIO") {
                            this.formData.auditMediaLists.push(date.auditMediaList[i])
                        } else if (date.auditMediaList[i].fileType == "VIDEO") {
                            this.formData.videoList.push(date.auditMediaList[i])
                        } else if (date.auditMediaList[i].fileType == "TEXT") {
                            this.formData.documentList.push(date.auditMediaList[i])
                        } else if (date.auditMediaList[i].fileType == "OTHER") {
                            this.formData.otherList.push(date.auditMediaList[i])
                        }
                    }
                } else {
                    utils.customDialog.toast({
                        message: res.data.message
                    });
                    utils.jumpFunction(res.data)
                }

            })

        },
    })
</script>

</html>